<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="searchVal"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 搜索历史 -->
    <div class="searchHistory" v-show="isTagListVisable">
      <div class="top">
        <p>搜索历史</p>
        <van-icon class="van-icon-delete" @click="clearSearch()"></van-icon>
      </div>
      <div class="tagList">
        <van-list v-model="loading" :finished="finished" finished-text="暂无搜索历史" @load="onLoad">
          <van-tag v-for="(item, i) in searchHistoryList" :key="i">{{searchHistoryList[i]}}</van-tag>
        </van-list>
      </div>
    </div>
    <!-- 搜索信息 -->
    <div class="prodList" v-show="isProdListvisable">
      <van-swipe-cell v-for="item in prodList" :key="item.id">
        <van-cell :border="false" :title="item.name" :value="item.ctime | dateFormat" />
        <template #right>
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      searchVal: '',
      loading: false,
      finished: false,
      // 搜索获取的信息列表
      prodList: [],
      isTagListVisable: true,
      isProdListvisable: false
    }
  },
  created() {},
  methods: {
    onLoad() {
      this.finished = true
    },
    async onSearch() {
      if (this.searchVal.trim().length === 0)
        return this.$toast('请输入搜索内容')
      const { data: res } = await this.$http.get('/api/getprodlist')
      this.prodList = res.message
      console.log(this.prodList)
      this.isProdListvisable = true
      this.isTagListVisable = false
      this.$store.commit('setSearchHistory', this.searchVal)
    },
    onCancel() {
      this.searchVal = ''
      this.isProdListvisable = false
      this.isTagListVisable = true
    },
    clearSearch() {
        this.$store.commit('clearSearchHistory')
    }
  },
  computed: {
    ...mapState(['searchHistoryList'])
  }
}
</script>

<style lang="less" scoped>
.searchHistory {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  .tagList {
    padding: 5px 10px;
  }
  .van-tag{
      margin: 0 5px;
      font-size: 12px;
  }
}
</style>
